/* 版心 */
.w {
    /* 版心是w1200 */
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.style_red {
    color: #c81623;
}

/* 通用的部分 */
/* 快捷导航模块 通栏的 */
.shortcut {
    /* 宽度就是100%body不用写，高度量出来的 */
    /* shortcut设置行高可以继承给里面的子盒子，使子盒子中文字垂直居中 */
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
    float: left;
}

/* 选择所有偶数li */
.shortcut .fr ul li:nth-of-type(2n) {
    width: 1px;
    height: 12px;
    /* 通过偶数li的margin来隔开文字的间距，上下外边距也是margin */
    margin: 9px 16px;
    background-color: #666;


}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?1lv3na');
    src: url('../fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?1lv3na') format('truetype'),
        url('../fonts/icomoon.woff?1lv3na') format('woff'),
        url('../fonts/icomoon.svg?1lv3na#icomoon') format('svg');

    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* .shortcut .fr .down_arrow {
    position: relative;
    
    padding-right: 10px;
} */
/* 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小 */
/* 绝对定位的下箭头会压住文字 */
/* 所以这里必须设置padding right 给箭头留一点位置，否则下箭头会压住文字，right没用 下箭头还是会压住文字 */
/* .shortcut .fr ul .down_arrow::after {

    position: absolute;
    content: "\e91e";
    top: 0;
 
    font-family: 'icomoon';
  
    font-size: 10px;

} */
/* 或者下箭头的设置不要使用 子绝父相，直接添加就行了 */
.shortcut .fr ul .down_arrow::after {
    content: "\e91e";
    font-family: 'icomoon';
    margin-left: 6px;
}

/* header头部模块制作 父盒子宽度已经通过w设置了1200 父盒子必须有高度105 */
.header {
    position: relative;
    height: 105px;
    /* background-color: pink; */
}

.logo {
    /* 采用绝对定位(子绝父相) 设置logo盒子的位置 */
    position: absolute;
    top: 25px;
    width: 175px;
    height: 56px;
    /* background-color: skyblue; */

}

.logo h1 {
    width: 175px;
    height: 56px;
    /* border: 1px solid yellow; */
}

.logo h1>a {
    /* 一旦设置了 a的高度 ，a的父亲h1 也会被撑开 */
    /* 这里 要么给a 设置 display:block 
    要么 给a 设置 line-height: 56px; 否则 背景图会往下掉*/
    /* box-sizing: border-box; */
    display: inline-block;
    width: 175px;
    height: 56px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 20px; */
    /* line-height: 56px; */
    /* text-align: center; */
    /* 淘宝的做法使文字隐藏 */
    text-indent: -99999px;
    overflow: hidden;

    /* border: 1px solid black; */

    /* margin-top: -10px;
    padding: 0; */
}

.search {
    position: absolute;
    /* 量边距的时候 不要把border算进去 */
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

.search input {
    float: left;
    width: 454px;
    height: 32px;
    padding-left: 10px;



}

.search button {
    float: right;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    color: #fff;
    font-size: 16px;


}

.hotwords {
    position: absolute;
    top: 61px;
    left: 346px;
    margin-top: 6.8px;
}

.hotwords a {
    margin: 0 10px;
    font-size: 12px;
}

.cart {
    position: absolute;
    /* 346++538+111 */
    left: 995px;
    top: 25px;
    width: 140px;
    height: 36px;
    background-color: #f7f7f7;
    border:1px solid #dfdfdf;
    text-align: center;
    line-height: 36px;
    font-size: 12px;

}
.cart::before{
    /* float: left; */
    content: "\e93a";
    font-family: 'icomoon';
    color: #d94f4f;
    /* font-size: 20px; */
    /* line-height: 36px; */
    margin-right: 6px;

}
.cart::after {
    float:right;
    content: "\e920";
    font-family: 'icomoon';
    /* font-size: 20px; */
    /* line-height: 36px; */
    color: #a7a7a7;
    margin-right: 10px;
}
.count{
    /* 购物车的商品件数应该设置left而不是right */
    position: absolute;
    top:-5px;
    left:105px;
    height: 14px;
    color:#fff;
    background-color: #e60012;
    /* 如果不重新设置行高，会继承父亲行高36太大了，导致8到下面去了 */
    line-height: 14px;
    padding: 0 5px;
    /* 只有左下角是直角，其他三个都变圆 */
    border-radius: 7px 7px 7px 0;

}
/* nav模块制作 */
.nav{
    /* 宽度不要设置 是通栏的 ,height47包括了边框2px*/
    height: 47px;
    border-bottom: 2px solid #b1191a;

}
.nav .dropdown{

    float:left;

    /* 宽度不要量包括父盒子的下边框 */
    width: 209px;
    height: 45px;
    background-color:#b1191a;
    /* 这个盒子里先不要写东西 */

}
.dropdown .dt{
    /* 全部商品分类 文字设置*/
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;


}
.dropdown .dd{
        /* 在写footer的时候 先把dd隐藏 */
            /* display: none; */
            /* visibility: hidden; */
    /* 这里上边距设置是为了不让此盒子遮住通栏盒子的下边框 */
    margin-top: 2px;
    width: 100%;
    height: 467px;
    background-color: #c81623;

}
.dropdown .dd ul li{
    position: relative;
    height: 31px;
    line-height: 31px;
    /* 12+本来的border 1就是 文字的左边距13 */
    padding-left: 12px;
    /* 这里的边缘红色1px也可以通过设置li的margin-left来实现，不用border */
    border: 1px solid #c81623;
    /* 还是用border把，margin会撑大父盒子 */
    /* margin-left: 1px ; */
}
.dropdown .dd ul li a{
    /* 这里做了改进，将a设置了block,扩大了点击范围 */
    display: block;
    font-size: 14px;
    color: #fff;
    /* text-align: center; */
}
.dropdown .dd ul li:hover {
    border-right: 0;
    background-color: #fff;
    

}
.dropdown .dd ul li:hover a{
    color: #c81623;
}

/* 这里的箭头也可以用float:right而不是绝对定位，这里已经垂直居中了，li已经设置了高度，行高 */
.dropdown .dd ul li a::after{
    /* 因为 a设置了block撑满了li的宽度，将伪元素添加在a里面 而不是li里面，否则右箭头会向下错位 */
    
    position: absolute;
    right: 7px;
    content: "\e920";
    font-family: 'icomoon';
    color:#fff;
    font-size: 14px;
}
.dropdown .dd ul li:hover a::after{
    visibility: hidden;
    /* display: none; */
}
.nav .navitems{
    float: left;
    margin-left: 15px;
    
}
.nav .navitems li{
    float: left;
    height: 45px;
    line-height: 45px;
}
.nav .navitems ul li a{
    /* 为了扩大a的范围 将其设置为block */
    display: block;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 25px;
    /* border: 1px solid black; */
    /* padding: 0 25px; */
}
.footer{
    height: 415px;
    /* 因为footer与其第一个子盒子之间有空隙，从footer上边到红色圆圈的顶部 */
    padding-top: 30px;
    background-color: #f5f5f5;
}
.mod_service{
    height: 80px;
    border-bottom: 1px solid #ccc;
}
.mod_service ul li{
    float: left;
    /* 1200/5, 高度就是一个红色圆的直径 */
    width: 240px;
    height: 50px;
    /* background-color: pink; */
    padding-left: 35px;
}
.mod_service ul li:nth-of-type(1) h5{
    /* 放红色圆的盒子 */
    float: left;
    width: 50px;
    height: 50px;
    background:url(../images/icons.png) no-repeat -252px -3px;
    margin-right: 8px;
}
.mod_service ul li:nth-of-type(2) h5 {
    /* 放红色圆的盒子 */
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -255px -54px;
    margin-right: 8px;
}
.mod_service ul li:nth-of-type(3) h5 {
    /* 放红色圆的盒子 */
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -257px -106px;
    margin-right: 8px;
}
/* 258 157 */
.mod_service ul li:nth-of-type(4) h5 {
    /* 放红色圆的盒子 */
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -258px -157px;
    margin-right: 8px;
}
.mod_service ul li:nth-of-type(5) h5 {
    /* 放红色圆的盒子 */
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -258px -209px;
    margin-right: 8px;
}
.service_txt h4{
    font-size: 14px;
}
.service_txt p{
    font-size: 12px;
}

.mod_help{
    height: 188px;
    border-bottom: 1px solid #ccc;
    padding-top:20px;
    padding-left: 50px;

}
/* (1200-20)/6 */
.mod_help dl{
    float: left;
    width: 190px;
    /* 这里也可以设置padding左右 隔开盒子与盒子的左右边距 */
}
.mod_help dl:last-of-type{
    /* 最后一个帮助中心 宽度要小一点 */
    width: 90px;
    text-align: center;
}
.mod_help dl dt{
    font-size: 16px;
    /* border: 1px solid red; */
    margin-bottom: 10px;
}
.mod_copyright{
    text-align: center;
    margin-top: 20px;
    /* margin-bottom: 40px; */
}
.mod_copyright .links{
    /* text-align: center; */
    height: 16px;
    margin-bottom: 15px;
    /* border: 1px red solid; */
    margin-left: 190px;
    
}
/* .mod_copyright .links ul{
    border: 10px solid green;
} */
.mod_copyright .links li{
    float: left;
     /* border: 1px solid blue; */
    text-align: center;
    /* height: 16px;
    line-height: 16px;  */
    font-size: 0;
}
.mod_copyright .links li a{
    /* display: block; */
    /* border: solid 1px blue; */
    border-right: solid 1px #999999;
    padding: 0 6px;
    font-size: 12px;
        /* height: 14px; */
            /* line-height: 16px; */
}
.mod_copyright .links li:last-of-type a{
    border-right:none;
}
.mod_copyright .copyright{
    line-height: 20px;
}